<?php
/**
 * Created by PhpStorm.
 * User: linyh
 * Date: 2017/11/25 0025 10:13
 */
?>
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">
<!--<div class="content-wrapper">-->
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        产品库存
    </h1>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>产品名称</th>
                        <th>产品配方</th>
                        <th>原料成本</th>
                        <th>当前库存</th>
                        <th>当前定价</th>
                        <th>定价</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button id="buy" class="btn btn-block btn-success">修改单价</button>
            </div>
        </div>
    </div>
</div>
</section>

<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap.min.js"></script>
<script>
var $table = $('#table');
var $tr = $table.find('tbody tr').remove();
$.ajax('/api/product/user-list', {
    type: 'GET',
    data: {
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function(ret) {
    if(ret.state ==0) {
        data = ret.data;
        $('#table').DataTable({
            "columnDefs": [
                {
                    "targets": 1,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        var string = '';
                        for(var i in data) {
                            string += data[i].entry.name + '*' + data[i].num + ((data[i].entry.unit)?(data[i].entry.unit):'个') + ' ';
                        }
                        return string;
                    }
                },
                {
                    "targets": 5,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        return '<input class="text-center" min="0" type="number" name="price" lk-id="' + row.product.id + '" placeholder="请输入新的定价"/>';
                    }
                },
            ],
            data: data.list,
            columns: [
                { data: 'product.name' },
                { data: 'product.productMaterials' },
                { data: 'product.material_cost' },
                { data: 'num' },
                { data: 'sale_price' },
                { data: 'id' },
                // { data: 'office' }
            ],
            'paging'      : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $("table tr th").css({"text-align":"center"});
        $("table").css({"text-align":"center"});
    } else {
        alert(ret.message);
    }
});
var ifRefresh = false;
$('#buy').click(function() {
    if(ifRefresh) {
        location.reload();
        return;
    }
    $('input[name=price]').attr('disabled', 1).each(function() {
        var $this = $(this);
        if($this.val()>0) {
            $.ajax('/api/product/price', {
                type: 'post',
                data: {
                    'product_id': $this.attr('lk-id'),
                    'price': $this.val(),
                },
                dataType: 'json',
                headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
            }).then(function(ret) {
                if(ret.state ==0) {
                    $this.parent().parent().find('td:eq(4)').text($this.val());
                    $this.parent().text('定价成功');
                } else {
                    $this.parent().text(ret.message);
                }
            });
        } else {
            $this.parent().text('-');
        }
    });
    $('#buy').text('定价成功，刷新查看').removeClass('btn-primary');
    ifRefresh = true;
})
</script>